<!-- 功能：RAID管理 | 作者：menghao.yan | 邮箱：yxs2615@163.com | 时间：2023年08月13日 15:04:16 -->
<template>
  <a-row>
    <a-col :span="24">
      <a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" class="y-raid-menu" :selectable="false" />
    </a-col>
  </a-row>

  <a-row :gutter="20">
    <a-col :span="18">
      <a-card>
        <a-table bordered :data-source="dataSource" :columns="columns" class="y-table" :pagination="false">
          <template #bodyCell="{ text, column, record }">
            <template v-if="column.key === 'name'">
              <a-space class="y-raid-table-name">
                <span>{{text}}</span>
                <a-tooltip color="#2e6e9e" placement="right">
                  <template #title>删除</template>
                  <a-button type="link" @click="RAIDShanChu">
                    <template #icon>
                      <delete-outlined />
                    </template>
                  </a-button>
                </a-tooltip>
              </a-space>
            </template>
          </template>
        </a-table>
      </a-card>

      <a-card>
        <div class="y-raid-machine" v-for="raidIndx in 2">
          <div class="y-raid-machine-index">
            {{raidIndx}}
          </div>
          <div class="y-raid-machine-content">
            <div v-for="index in 24" class="y-raid-disk" :key="'raid_disk_' + index">
              <template v-if="index<=6">
                <div class="y-raid-disk-index">400</div>
                <div class="y-raid-disk-name">DISK 0-{{index}}</div>
                <div class="y-raid-disk-icon">
                  <a-image :width="20" :src="diskunusePng" :preview="false" />
                </div>
              </template>
            </div>
          </div>
          <div class="y-raid-machine-tail">
          </div>
        </div>
      </a-card>
    </a-col>
    <a-col :span="6">
      <a-card>
        <a-descriptions title="磁盘状态描述" bordered size="small" :column="2">
          <a-descriptions-item>
            <a-image :width="20" :src="diskunusePng" :preview="false" />
          </a-descriptions-item>
          <a-descriptions-item>未使用</a-descriptions-item>
          <a-descriptions-item>
            <a-image :width="20" :src="disklocatePng" :preview="false" />
          </a-descriptions-item>
          <a-descriptions-item>定位磁盘</a-descriptions-item>
          <a-descriptions-item>
            <a-image :width="20" :src="diskinusePng" :preview="false" />
          </a-descriptions-item>
          <a-descriptions-item>使用中</a-descriptions-item>
          <a-descriptions-item>
            <a-image :width="20" :src="disksparePng" :preview="false" />
          </a-descriptions-item>
          <a-descriptions-item>热备盘</a-descriptions-item>
          <a-descriptions-item>
            <a-image :width="20" :src="diskinactivePng" :preview="false" />
          </a-descriptions-item>
          <a-descriptions-item>未激活</a-descriptions-item>
          <a-descriptions-item>
            <a-image :width="20" :src="diskdeadPng" :preview="false" />
          </a-descriptions-item>
          <a-descriptions-item>损坏</a-descriptions-item>
        </a-descriptions>
      </a-card>
    </a-col>
  </a-row>
</template>

<script setup>
import diskunusePng from '@/assets/images/raidGuanLi/diskunuse.png'
import disklocatePng from '@/assets/images/raidGuanLi/disklocate.png'
import diskinusePng from '@/assets/images/raidGuanLi/diskinuse.png'
import disksparePng from '@/assets/images/raidGuanLi/diskspare.png'
import diskinactivePng from '@/assets/images/raidGuanLi/diskinactive.png'
import diskdeadPng from '@/assets/images/raidGuanLi/diskdead.png'

import { SettingOutlined, PlusOutlined, DeleteOutlined, ExclamationCircleOutlined } from '@ant-design/icons-vue'
import { Modal } from 'ant-design-vue'
const current = ref(['mail'])
const items = ref([
  {
    popupClassName: 'y-raid-popup',
    key: 'raidCaoZuo',
    icon: () => h(SettingOutlined),
    label: 'RAID操作',
    title: 'RAID操作',
    children: [
      { icon: () => h(PlusOutlined), label: '创建RAID', key: 'raidChuangJian' },
      { icon: () => h(DeleteOutlined), label: '删除RAID', key: 'raidShanChu' },
      { icon: () => h(PlusOutlined), label: '激活RAID', key: 'raidJiHuo' },
      { icon: () => h(PlusOutlined), label: '扩展RAID', key: 'raidKuoZhan' },
      { icon: () => h(PlusOutlined), label: '校验RAID数据', key: 'raidJiaoYan' }
    ]
  },
  {
    popupClassName: 'y-raid-popup',
    key: 'ciPanCaoZuo',
    icon: () => h(SettingOutlined),
    label: '磁盘操作',
    title: '磁盘操作',
    children: [
      { icon: () => h(PlusOutlined), label: '设置热备盘', key: 'sheZhiReBeiPan' },
      { icon: () => h(DeleteOutlined), label: '删除热备盘', key: 'shanChuReBeiPan' },
      { icon: () => h(PlusOutlined), label: '激活磁盘', key: 'jiHuoCiPan' },
      { icon: () => h(PlusOutlined), label: '定位磁盘', key: 'dingWeiCiPan' },
      { icon: () => h(PlusOutlined), label: '取消定位', key: 'quXiaoDingWei' },
      { icon: () => h(PlusOutlined), label: '扫描扩展柜', key: 'saoMiaoKuoZhanGui' },
      { icon: () => h(PlusOutlined), label: '全局扫描磁盘柜', key: 'quanJuSaoMiaoCiPanGui' }
    ]
  },
  {
    popupClassName: 'y-raid-popup',
    key: 'ciPanJianCe',
    icon: () => h(SettingOutlined),
    label: '磁盘检测',
    title: '磁盘检测',
    children: [{ icon: () => h(SettingOutlined), label: 'S.M.A.R.T', key: 'smart' }]
  }
])

// 表格列
const columns = ref([
  {
    title: 'RAID名称',
    dataIndex: 'name',
    key: 'name',
    align: 'center',
    sorter: {
      compare: (a, b) => a.name.localeCompare(b.name),
      multiple: 1
    }
  },
  {
    title: '容量',
    dataIndex: 'rongLiang',
    key: 'rongLiang',
    align: 'center'
  },
  {
    title: 'RAID级别',
    dataIndex: 'level',
    key: 'level',
    align: 'center'
  },
  {
    title: '所属控制器',
    dataIndex: 'suoShuKongZhiQi',
    key: 'suoShuKongZhiQi',
    align: 'center'
  },
  {
    title: '状态',
    dataIndex: 'status',
    key: 'status',
    align: 'center'
  }
])

// 表格数据
const dataSource = ref([
  {
    key: '1',
    name: 'RAID0',
    rongLiang: '1000GB',
    level: 'RAID0',
    suoShuKongZhiQi: 'SAS3008',
    status: '正常'
  },
  {
    key: '2',
    name: 'RAID1',
    rongLiang: '2000GB',
    level: 'RAID1',
    suoShuKongZhiQi: 'SAS3008',
    status: '正常'
  }
])
const RAIDShanChu = () => {
  Modal.confirm({
    title: '确认操作',
    icon: h(ExclamationCircleOutlined),
    content: '您确定要删除该RAID?',
    okText: '确定',
    okType: 'danger',
    cancelText: '取消',
    onOk() {
      console.log('OK')
    },
    onCancel() {
      console.log('Cancel')
    }
  })
}
</script>

<style scoped lang='scss'>
.ant-row {
  margin-bottom: 10px;
}
.y-raid-menu {
  background: #dfeffc url('../../assets/images/menu-btn-bg.png') 50% 50% repeat-x;
  font-weight: bold;
  color: #2e6e9e;
  height: 40px;
  line-height: 40px;
  padding: 0 20px;
}
.y-raid-table-name {
  color: #67c23a;
}

.y-raid-machine {
  display: inline-flex;
  justify-content: space-between;
  width: 100%;
  height: 193px;
  align-items: center;
  background: #dfeffc url('../../assets/images/raidGuanLi/diskfm24bgm.png') 50% 50% repeat-x;
  font-weight: bold;
  color: #ffffff;
}

.y-raid-machine-index {
  line-height: 193px;
  text-align: center;
  font-weight: bold;
  width: 2rem;
  height: 100%;
  background: #dfeffc url('../../assets/images/raidGuanLi/diskfm24bgl.png') 50% 50% repeat-x;
}

.y-raid-machine-content {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(4, 1fr);
  overflow: auto;
}

.y-raid-machine-tail {
  width: 2rem;
  height: 100%;
  background: #dfeffc url('../../assets/images/raidGuanLi/diskfm24bgr.png') 50% 50% repeat-x;
}
.y-raid-disk {
  font-size: 12px;
  line-height: 30px;
  background: url('../../assets/images/raidGuanLi/diskbg.png') 50% 50% no-repeat;
  background-size: cover;
  font-weight: bold;
  height: 30px;
  margin: 0px 2px;
  display: inline-flex;
  align-items: center;
}
.y-raid-disk-index {
  height: 30px;
  width: 2.3rem;
  text-align: center;
  color: #ffffff;
  font-weight: bold;
}

.y-raid-disk-name {
  height: 30px;
  width: 5.5rem;
  text-align: center;
  color: #2e6e9e;
  font-weight: bold;
}

.y-raid-disk-icon {
  height: 30px;
  width: 2.2rem;
   text-align: center;
}
</style>